<template>
  <div class="remarks-style">
    <t-image-viewer v-model:visible="ImgVisible" :images="[getLinkUrl(ImgUrl)]"> </t-image-viewer>
    <div class="remarks-style-content" :style="{ backgroundImage: `url(${publicUrls + 'free/style9/pop-upBg.webp'})` }">
      <div
        class="right-top"
        :style="{ backgroundImage: `url(${publicUrls + 'free/style9/rightTopBg.webp'})` }"
      >
        <img :src="publicUrls + 'free/style9/pop-upCloseIcon.webp'" alt="" class="close-btn" @click="close" />
      </div>
      <ScrollBox
        color="rgba(50, 43, 37, 1)"
        v-if="Scrollheights && store.exhibitsInfoShow"
        :byid="200"
        :height="getScrollWComputed"
        :topFlag="flag"
        :scroll-src="publicUrls + 'free/style9/scrollIcon.webp'"
      >
        <template #solidBorderCon>
          <exhibitsTop @addExId="selectInit" :info="Exinfo" @view-img="viewImg"></exhibitsTop>
          <!-- 展品描述 -->
          <div class="exhibit-describe" v-if="(Exinfo.audio && Exinfo.audio.url) || Exinfo.description">
            <div class="jointly-title"><div>展品描述</div></div>
            <div class="description-text" v-if="Exinfo.description" v-html="Exinfo.description"></div>
            <div class="audio-parent" v-if="Exinfo.audio && Exinfo.audio.url">
              <playAudio
                v-if="!store.isMobileType"
                :descriptionColor="'rgba(51, 51, 51, 1)'"
                :playColor="'rgba(232,225,212, .5)'"
                :timeColor="'rgba(112,99,85, 0.8)'"
                :iconColor="'rgba(112,99,85, 1)'"
                :nameColor="'rgba(112,99,85, 1)'"
                :background="'rgba(242, 235, 223, 0.3)'"
                :name="Exinfo.audio.name"
                :url="Exinfo.audio.url"
                :description="Exinfo.audio.description"
              />
              <wapPlayAudio
                v-else
                :descriptionColor="'rgba(51, 51, 51, 1)'"
                :playColor="'rgba(232,225,212, .5)'"
                :timeColor="'rgba(112,99,85, 0.8)'"
                :iconColor="'rgba(112,99,85, 1)'"
                :nameColor="'rgba(112,99,85, 1)'"
                :background="'rgba(242, 235, 223, 0.3)'"
                :name="Exinfo.audio.name"
                :url="Exinfo.audio.url"
                :description="Exinfo.audio.description"
              />
            </div>
          </div>
          <!-- 相关展品 -->
          <div class="beExhibits" v-if="moduleExhibits?.length !== 0">
            <div class="jointly-title"><div>相关展品</div></div>
            <div class="ExList">
              <div
                class="ExBox"
                ref="ExBox"
                :style="{
                  background: `url(${publicUrls + 'free/style9/exhibitBg.png' + '?imageView2/3/format/webp'})`,
                }"
                v-for="(item, index) in moduleExhibits"
                :key="index"
                @click="ExList(item?.id)"
              >
                <div
                  class="cover-img"
                  :style="{
                    background: `url(${publicUrls + 'free/style9/exhibitImgBg.png' + '?imageView2/3/format/webp'})`,
                  }"
                >
                  <img
                    :src="$filters.getLinkUrl(item?.coverUrl, '?imageView2/3/w/560/format/webp')"
                    alt=""
                    class="empty-img"
                  />
                </div>
                <div class="Extitle">
                  {{ item?.name }}
                </div>
                <!-- <div class="line" v-if="!store.isMobileType"></div> -->
              </div>
            </div>
          </div>
        </template>
      </ScrollBox>
    </div>
  </div>
  <div class="select-box">
    <!-- placement="center" -->
    <t-dialog
      header="添加展品至展览"
      :visible="visibleStep"
      :confirm-on-enter="true"
      :on-cancel="closetables"
      :on-close="closetables"
      :cancelBtn="null"
      :confirmBtn="null"
    >
      <template #body>
        <t-row :gutter="16" style="width: 100%">
          <t-col :span="12">
            <div class="hw-dialog-box">
              <span class="titles">请选择展览:</span>
              <div class="hw-dialog-box-select">
                <t-select v-model="projectId" placeholder="请选择展览">
                  <t-option :key="item.id" :label="item.name" :value="item.id" v-for="item in selectInitList" />
                </t-select>
              </div>
            </div>
          </t-col>
        </t-row>
      </template>
      <template #footer>
        <t-button @click="visibleStep = false" theme="default" variant="outline">取消</t-button>
        <t-button @click="okStep">确定</t-button>
      </template>
    </t-dialog>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style9',
});
</script>
<script lang="ts" setup>
// @ts-nocheck
import { MessagePlugin } from 'tdesign-vue-next';
import { addExhibits } from '@/api/desgin/desgin';
import { getHeardToken } from '@/api/utils';
import { projectLists } from '@/api/project/project';
import { urls, getLinkUrl } from '@/utils/request/upload';
import { showToast, showImagePreview } from 'vant';
import exhibitsTop from './component/exhibitsTop.vue';
import playAudio from '@/components/templatePlay/audio.vue';
import wapPlayAudio from '@/freeComponents/templatePlay/audio.vue';
import { publicUrls } from '@/utils/minxin';
import { useProjectStore } from '@/store';
import { reactive, ref, watch, computed, defineComponent } from 'vue';
import { exhibitShowpiece } from '@/api/templates/templates';
import { moduleShowpieces } from '@/api/desgin/desgin';
import ScrollBox from '../scrollBox.vue';

const emits = defineEmits(['viewImg']);
const store = useProjectStore();
const Exinfo = ref({}) as any;
const Scrollheights = ref();
const moduleExhibits = ref([]);
const selectInitList = ref([]);
const flag = ref(false);
const ImgUrl = ref('');
const WaplookList = ref([]);
const showpieceid = ref(store.exhibitsShowpieceid); // 选中展品的id
const ImgVisible = ref(false);
const projectId = ref(null);
const visibleStep = ref(false);
const loading = ref(false);
const parmas = reactive({
  pageSize: 999,
  pageNo: 1,
  id: store.exhibitsModuleId, // 展览id
  value: '',
  projectId: localStorage.getItem('projectId'),
});

const props = defineProps({
  info: {
    type: Object,
  },
  list: {
    type: Object,
  },
});

let viewportHeight = window.innerHeight;
Scrollheights.value = viewportHeight * 480;
const getScrollWComputed = computed(() => {
  let rootNode = document.documentElement;

  // 获取计算后的样式
  let computedStyle = window.getComputedStyle(rootNode);

  // 读取字体大小（注意这里返回的可能是一个包含单位的字符串，如"16px"）
  let fontSize = computedStyle.fontSize;

  // 如果你需要一个数字值（不带单位）进行计算，你可能需要解析这个字符串
  // 例如，使用正则表达式或split()方法去除单位，并将结果转换为数字
  let fontSizeNumber = parseFloat(fontSize.replace(/[^0-9.-]/g, ''));
  let heights = (fontSizeNumber / 144) * 480;
  return heights;
});
const close = () => {
  store.exhibitsInfoShow = false;
};

const init = async () => {
  // 获取选中展品
  let { data } = await exhibitShowpiece(parmas.id, showpieceid.value);
  Exinfo.value = data;
  // console.log(Exinfo.value, '123');
  // 获取单元所有展品
  let res = await moduleShowpieces(parmas);
  WaplookList.value = [];
  moduleExhibits.value = res.data.data.filter((item) => item.id !== Exinfo.value.id);
  Exinfo.value.images.unshift({
    data: Exinfo.value.coverUrl,
    type: -1,
  });
  Exinfo.value.images.forEach((element) => {
    let url = getLinkUrl(element.data);
    WaplookList.value.push(url);
  });
  // console.log(moduleExhibits.value, '123');
};
init();

const ExList = (id: number) => {
  showpieceid.value = id;
  parmas.id = store.exhibitsModuleId;
  flag.value = !flag.value;
  setTimeout(() => {
    init();
  }, 0);
};

const viewImg = (url: string, indexs?: number) => {
  if (store.isMobileType) {
    ImgUrl.value = getLinkUrl(url);
    // showImagePreview({
    //   showIndex: WaplookList.value.length > 1 ? true : false,
    //   startPosition: indexs ? indexs : 0,
    //   images: WaplookList.value,
    //   onClose() {
    //     // showToast('关闭');
    //   },
    // });
    emits('viewImg', WaplookList.value, indexs ? indexs : 0);
  } else {
    ImgUrl.value = url;
    ImgVisible.value = true;
  }
};
const selectInit = async () => {
  try {
    let res = await projectLists(Exinfo.value.id);
    if (res.data.length > 0) {
      selectInitList.value = res.data;
      visibleStep.value = true;
      // console.log('selectInitList.value', Exinfo.value);
    } else MessagePlugin.warning('暂无可添加的展览');
  } catch (err) {
    console.log(err);
  }
};
const addId = () => {
  let token = getHeardToken();
  if (!token) {
    // ElMessageBox.alert('是否前往登录？', '您暂未登录', {
    //   confirmButtonText: '确定',
    //   callback: (action: Action) => {
    //     if (action === 'confirm') {
    //       pathSubmitClick();
    //     }
    //   },
    // });
    // visibleMessage.value = true;
    store.loginModeShow = true;
    return;
  }
  selectInit();
};
const okStep = async () => {
  try {
    if (loading.value) {
      return;
    }
    if (projectId.value) {
      loading.value = true;
      let res = await addExhibits(projectId.value, Exinfo.value.id, [Exinfo.value.id]);
      if (res.succeeded) {
        MessagePlugin.success('添加成功');
      }

      loading.value = false;
      visibleStep.value = false;
      projectId.value = null;
    } else {
      MessagePlugin.success('请选择展览');
      return;
    }
  } catch {
    loading.value = false;
  }
};
const closetables = (context?: any): void => {
  visibleStep.value = false;
};
watch(
  () => store.exhibitsInfoShow,
  () => {
    showpieceid.value = store.exhibitsShowpieceid;
    parmas.id = store.exhibitsModuleId;
    flag.value = !flag.value;
    setTimeout(() => {
      init();
    }, 0);
  },
);
</script>

<style lang="less" scoped>
::v-deep .solid-box-parent {
  margin-top: 60px;
}
::v-deep .solid-box {
  img {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0;
  }
  .templatestyle1-scroll-box-tumb {
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
  }
}
::v-deep .solid-border {
  width: 2px;
  flex-shrink: 0;
  background-color: #857866;
  opacity: 0.6;
  left: 50%;
  transform: translateX(-50%);
}
::v-deep .unit-exbit-null-remarks-info {
  min-height: 620px !important;
}
.remarks-style {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 1200px;
  max-width: 1200px;
  height: 720px;
  background: transparent;
  transform: translateZ(0px);
}
.remarks-style-content {
  width: 1200px;
  height: 720px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  background-repeat: repeat;
  background-size: 100% 100%;
  padding: 60px 98px 0 98px;
  // padding-top: 134px;
  box-sizing: border-box;
  position: relative;
  transform: translateZ(1px);
}
::v-deep .van-image-preview__overlay {
  transform: translateZ(2px);
}
::v-deep .t-image-viewer-preview-image {
  transform: translateZ(3px);
}
::v-deep .van-image-preview__index {
  transform: translateZ(4px);
}
.right-top {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 164px;
  height: 67px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
}
.exhibit-describe {
  width: 100%;
  margin-top: 40px;
}
.jointly-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    color: #706355;
    text-align: center;
    font-family: 'SourceHanSerifCN';
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px; /* 166.667% */
  }
}
.description-text {
  width: 100%;
  margin-top: 16px;
  ::v-deep p {
    color: #333;
    text-align: justify;
    font-family: 'PingFangSC';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 200% */
    text-indent: 32px;
    margin-bottom: 24px;
  }
  ::v-deep p:last-child {
    margin-bottom: 0;
  }
}
.audio-parent {
  width: 100%;
  margin-top: 16px;

  ::v-deep .audio-name {
    font-family: 'PingFangSC';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 38px; /* 190% */
  }
  ::v-deep .right-bottom-left,
  ::v-deep .right-bottom-right {
    font-family: 'MicrosoftYaHei';
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
  }
  ::v-deep .t-slider__track {
    height: 2px;
    background-color: #706355;
  }
  ::v-deep .t-slider__rail {
    height: 2px;
    background: rgba(112, 99, 85, 0.5);
  }
  ::v-deep .t-slider__button {
    border: 2px solid #706355;
    width: 14px;
    height: 14px;
    border: none;
    background-color: #706355;
  }
  ::v-deep .right-top-play {
    .doorIcon {
      font-size: 26px;
    }
  }
  ::v-deep .infoShow-box {
    text-align: justify;
    font-family: 'PingFangSC';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 200% */
  }
  ::v-deep .left-box {
    .doorIcon {
      font-size: 42px !important;
    }
  }
}
.beExhibits {
  width: 100%;
  margin-top: 40px;
}
.ExList {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  // justify-content: space-between;
  margin-top: 16px;
}
.ExBox {
  width: 300px;
  height: 394px;
  flex-shrink: 0;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  padding: 20px 20px 0 20px;
  cursor: pointer;
  margin-bottom: 10px;
  &:hover {
    .empty-img {
      transform: scale(1.2);
    }
  }
}
.ExBox:nth-child(3n + 2) {
  margin: 0 32px;
}
.cover-img {
  width: 260px;
  height: 300px;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  .empty-img {
    width: 90%;
    height: 100%;
    object-fit: contain;
    transition: all 0.5s ease;
  }
}
.Extitle {
  width: 100%;
  color: #333;
  text-align: center;
  font-family: 'SourceHanSerifCN';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 180%; /* 32.4px */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 16px;
}
.select-box {
  :deep(.t-dialog) {
    padding: 0;
    background: transparent;
    border: none;
  }
  :deep(.t-dialog__header) {
    display: flex !important;
  }
  :deep(.t-dialog__footer) {
    display: flex !important;
  }
  :deep(.t-dialog) {
    max-height: 286px;
    padding: 0;
    background: #fff !important;
    z-index: 9999 !important;
  }
  :deep(.t-dialog__header) {
    display: initial;
    display: flex;
  }
  :deep(.t-dialog__footer) {
    display: initial;
    display: flex;
    justify-content: flex-end;
  }
  :deep(.t-dialog__body) {
    padding: 12px 32px !important;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-content: center;
  }
  :deep(.titles) {
    margin-bottom: 6px;
  }
}
.hw-dialog-box {
  display: flex;
  flex-direction: column;
}
::v-deep .scrollBar {
  width: 4px;
  height: 100%;
  background: #ffdc76;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}
</style>
